<template>
  <div class="container">
    <form @submit="formSubmit" bindreset="formReset">
      <div class="zan-panel">
        <div class="zan-row row">
          <checkbox-group class="checkbox-group" style="margin-left:1em" name="workType">
            <label class="checkbox zan-col zan-col-9" v-for="type in workTypeOptions" :key="type.key">
              <checkbox :value="type.key" :checked="type.checked" /> {{type.label}}
            </label>
          </checkbox-group>
        </div>

        <div class="zan-row row">
          <div class="zan-btns">
            <button class="zan-btn zan-btn--warn" formType="submit">确定</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import App from './index'
import { api } from '@/api/worker'
export default {
  data() {
    return {
      id: undefined,
      workType: ['1', '2','6','8'],
      workTypeOptions: [
        // 安装类目选项
        { label: '灯具', key: '1', checked: 'true' },
        { label: '地板', key: '2' },
        { label: '卫浴', key: '3' },
        { label: '墙纸', key: '4' },
        { label: '涂料', key: '5' },
        { label: '窗帘', key: '6' },
        { label: '门', key: '7' },
        { label: '浴霸', key: '8' },
        { label: '吊顶小件', key: '9' },
        { label: '集成吊顶', key: '10' },
        { label: '电子门锁', key: '11' },
        { label: '晾衣架', key: '12' },
        { label: '集吊测量', key: '13' },
        { label: '办公椅', key: '14' }
      ]
    }
  },

  created() {
    this.changeWorkTypeChecked()
  },
  methods: {
    /**
     * 修改工人安装类目
     */
    formSubmit: function(e) {
      api
        .updateWorkType({
          id: 215,
          workType: this.getWorkTypeStr(e.mp.detail.value.workType)
        })
        .then(res => {
          if (res.code == 0) {
            wx.navigateTo({ url: '../edit/auth' })
          } else {
            wx.showToast({
              title: res.message,
              duration: 2000
            })
          }
        })
    },
    changeWorkTypeChecked() {
      if (this.workType.length > 0) {
        for (let i = 0; i < this.workType.length; i++) {
          this.workTypeOptions[i].checked = 'true'
        }
      }
    },
    getWorkTypeStr(workTypeArr) {
      var workTypeStr = ''
      for (let index = 0; index < workTypeArr.length; index++) {
        if (index == workTypeArr.length - 1) {
          workTypeStr = workTypeStr + workTypeArr[index]
        } else {
          workTypeStr = workTypeStr + workTypeArr[index] + ','
        }
      }
      return workTypeStr
    }
  }
}
</script>
<style  scoped>
.container {
  background-color: #efeff0;
}
.zan-panel {
  background: #fff;
  margin-top: 0rpx;
  overflow: hidden;
}
.row .zan-col {
  margin-top: 1em;
  margin-left: 1.5em;
}
/* .zan-tag{
    margin-left: 93.75px;
}
.zan-tag + .zan-tag {
  padding-left: 93.75px;
} */
/* .zan-col {
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: black;
  width: 187.5px;
} */
</style>
